<template>
  <ul class="tabbar">
    <router-link
      tag="li"
      v-for="tabItem in list"
      :key="tabItem.pagePath"
      class="tabbar-item"
      :to="tabItem.pagePath"
    >
      <van-icon :name="tabItem.icon" size="30" />
      <span>{{tabItem.text}}</span>
    </router-link>
  </ul>
</template>

<script>
export default {
  name: 'Tabbar',
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
}
</script>

<style lang="less" scoped>
  .tabbar {
    display: flex;
    border-top: 1px solid #eaeaea;
    &-item {
      flex: 1;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
    }
    .router-link-exact-active, .router-link-active {
      color: #1989fa;
    }
  }
</style>
